{% extends 'header.html' %}
{% block title %}
	博客详细
{% endblock %}
{% block css %}
    <style>
    #content div{
        display: inline;
    }
    </style>
{% endblock %}
{% block js %}
    <script>window.login = "{% url 'userAuth:login' %}"</script>
{% endblock %}
{% block main %}
	<h1>{{ blog.title }}</h1>
    <hr>
    <div class="mt-2">
        <img width="30px" height="30px" src="{{ author.icon }}" alt="">
        <span class="ms-2">{{ author.username }}</span>
        <span class="ms-2">于</span>
        <span class="ms-2">{{ blog.time | date:'Y年m月d日 H:i:s' }}</span>
        <span class="ms-2">发布</span>
    </div>
    <hr>
    <div class="my-2" id="content">
        <input type="hidden" id="blog_id" value="{{ blog.id }}" disabled>
        {{ blog.content | safe}}
    </div>
    <hr>
    <div class="mt-3">
        <h4>评论({{ comment_num }}):</h4>
        <form action="" method="post">
            {% csrf_token %}
            <div class="my-3">
                <input class="form-control my-2" id="comment_content" type="text" placeholder="请输入评论" aria-label="default input example">
                <div class="text-end">
                    <button type="button" id="comment" class="btn btn-outline-primary">评论</button>
                </div>
            </div>
        </form>
        <div class="">
            <ul class="list-group">
                <script src="{% static 'js/comments.js' %}"></script>
                <input type="hidden" value="0" id="commentPage" disabled>
                <more id="moreArea"></more>
                <li class="list-group-item"><button id="moreComment" class="btn btn-outline-primary px-4 py-2 float-end">加载更多</button></li>
            </ul>
        </div>
    </div>
{% endblock %}